<template>
	<view class="container">
		<view v-if="checkAddLessonStudent()">
			<button class="uni-button" style="color:#ffffff;backgroundColor:#993399;borderColor:#993399 width: 100%;"
				type="primary" @click="handleAddLessonStudent">添加学员点名</button>
		</view>
		<uni-section title="课时信息" type="line"></uni-section>
		<view class="query-form">
			<view class="query-item">日期 <view class="query-item-value">{{parseTime(lesson.createTime, '{y}-{m}-{d}')}}</view></view>
			<view class="query-item">教练 <view class="query-item-value">{{lesson.coachName}}</view></view>
			<view class="query-item">场馆 <view class="query-item-value">{{lesson.stadiumName}}</view></view>
			<view class="query-item">班次 <view class="query-item-value">{{lesson.classesName}}</view></view>
			<view class="query-item">备注 <view class="query-item-value">{{lesson.remark}}</view></view>
		</view>
		<uni-section :title="'学员信息:共 ' + total + ' 人'" type="line"></uni-section>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">学号/姓名/备注</uni-th>
				<uni-th width="180rpx" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in lessonstudentList" :key="index">
				<uni-td>
					<view class="name">{{ item.studentCode }}</view>
					<view class="name">{{ item.studentName }}</view>
					<view class="name remark">{{ item.remark }}</view>
				</uni-td>
				<uni-td align="center">
					<view v-if="checkPermi(['puyu:lesson:editStudent'])">
						<button class="uni-button" size="mini" type="primary"
							@click="handleEditLessonStudent(item)">修改</button>
					</view>
					<view v-if="checkDeleteLessonStudent()">
						<button class="uni-button" size="mini" type="warn"
							@click="handleDeleteLessonStudent(item)">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total" @change="change"
			prev-text="前一页" next-text="后一页" />
		<view class="page-sum">
			<text>当前页：{{ queryParams.pageNum }}，数据总量：{{ total }} 条，每页数据：{{ queryParams.pageSize }} 条</text>
		</view>
	</view>
</template>

<script>
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission";

	import {
		listStudent,
		delStudent
	} from "@/api/puyu/lesson";
	import { parseTime } from '@/utils/common';
	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 课时信息
				lesson: {},
				// 学员课时点名表格数据
				lessonstudentList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					deptId: null,
					coachId: null,
					stadiumId: null,
					classesId: null,
				},
			}
		},
		computed: {
		},
		created() {

		},
		onLoad(option) {
			  const item = JSON.parse(decodeURIComponent(option.item));
			  this.lesson = item;
		},
		onShow() {
			this.getList();
		},
		methods: {
			checkPermi,
			checkRole,
			parseTime,
			/** 查询课时点名列表 */
			getList() {
				this.loading = true;
				this.queryParams.lessonId = this.lesson.lessonId;
				this.queryParams.orderByColumn = 'lessonStudentId'; //查询字段是表格中字段名字
				this.queryParams.isAsc = 'descending'; //动态取值排序顺序
				listStudent(this.queryParams).then(response => {
					this.lessonstudentList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 计算两个时间差几小时 */
			hoursBetween(time1, time2) {
				// 将时间字符串转换为Date对象
				  const date1 = new Date(time1);
				  const date2 = new Date(time2);				 
				  // 计算两个时间的时间戳差值
				  const diff = Math.abs(date2.getTime() - date1.getTime());				 
				  // 将差值转换为小时
				  const hours = diff / (1000 * 60 * 60);
				  // 返回结果
				  return hours;
			},
			/** 校验是否显示添加学员点名按钮 */
			checkAddLessonStudent() {
				let hours = this.hoursBetween(parseTime(this.lesson.createTime, '{y}-{m}-{d} {h}:{i}:{s}'), parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'));
				return this.$auth.hasPermi("puyu:lessons:addStudent") &&  hours <= 3 ;
			},
			/** 校验是否显示删除操作 */
			checkDeleteLessonStudent() {
				let hours = this.hoursBetween(parseTime(this.lesson.createTime, '{y}-{m}-{d} {h}:{i}:{s}'), parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'));
				return this.$auth.hasPermi("puyu:lesson:removeStudent") &&  hours <= 3 ;
			},
			/** 添加课时学员点名 */
			handleAddLessonStudent() {
				this.$tab.navigateTo('/pages/puyu/lesson/add-lesson-student?item=' + encodeURIComponent(JSON.stringify(this.lesson)));
			},
			/** 修改课时学员点名 */
			handleEditLessonStudent(item) {
				this.$tab.navigateTo('/pages/puyu/lesson/edit-lesson-student?item=' + encodeURIComponent(JSON.stringify(item)));
			},
			/** 删除课时学员点名 */
			handleDeleteLessonStudent(item) {
				const lessonStudentIds = item.lessonStudentId;
				this.$modal.confirm('是否确认删除课时学员ID为"' + lessonStudentIds + '"的数据项？').then(function() {
				  return delStudent(lessonStudentIds);
				}).then(() => {
				  this.getList();
				  this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.queryParams.pageNum = pageCurrent
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */

	.page-sum {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.query-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.query-item {
		margin: 10rpx;
		padding: 5rpx;
	}
	
	.query-item-value {
		margin-top: 5rpx;
		color: darkgray;
	}
	.remark {
		color: #993399;
		font-weight: bolder;
	}
</style>